<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>条件渲染</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">

            <!--这里使用template模板，在不破坏标签结构的情况下实现动态显示，注意：template只能配合v-if使用-->
            <template v-if="isShow">
                <h2>111111</h2>
                <h2>111111</h2>
                <h2>111111</h2>
            </template>

            <button @click="clickMe">点我</button>
        </div>

        <script type="text/javascript">
            new Vue({
                el: '#app',
                data() {
                    return {
                        isShow: false
                    }
                },
                methods: {
                    clickMe() {
                        this.isShow = !this.isShow;
                    }
                }
            })

        </script>
    </body>
</html>